<template>
  <div class="btnBox">
    
    <div class="homeIcon" @mouseenter="layerShow = true" @mouseleave="layerShow = false">
      <img src="/images/homeIcon.png"  alt="">
      <p v-if="layerShow" class="layerText" @click="ueMethod('exit')" >退出</p>
    </div>
    <div class="btn btn1" @mouseenter="btnIndex = 1" @mouseleave="btnIndex = 0" @click="ueMethod('returnHome')">
      <img  :src="btnIndex == 1 ? './images/btn1-1.png' : './images/btn1.png'" alt="">
    </div>
    <div class="btn btn2" @mouseenter="btnIndex = 2" @mouseleave="btnIndex = 0" @click="ueMethod('inWarehouse')">
      <img  :src="btnIndex == 2 ? './images/btn2-1.png' : './images/btn2.png'" alt="">
    </div>
    <div class="btn btn3" @mouseenter="btnIndex = 3" @mouseleave="btnIndex = 0" @click="ueMethod('SwitchingDevices')">
      <img  :src="btnIndex == 3 ? './images/btn3-1.png' : './images/btn3.png'" alt="">
    </div>
  </div>
</template>
<script setup>
import { ref , onMounted } from 'vue'

let btnIndex = ref(0);
let layerShow = ref(false);


function ueMethod(method)
{
  ue5(method,{});
}



</script>

<style scoped lang="less">
  .btnBox{
    width: 400px;
    height: auto;
    background-image: url("./images/btn_bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    .homeIcon{  
      width: 45%;
      height: auto;
      position: absolute;
      bottom: 4%;
      left: 27.5%;
      cursor: pointer;
      img{
        width: 100%;
        height: 100%  ;
      }
      .layerText{
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 46px;
        color: rgb(207, 28, 28);
        position: absolute;
        top: -10%;
        letter-spacing: 20px;
        font-weight: bolder;
      }
    }

    .btn1{
      width: 153px;
      height: 139px;
      position: absolute;
      top: 40px;
      left: 20px;
    }
    .btn2{
      width: 196px;
      height: 71px;
      position: absolute;
      top: 18px;
      left: 156px;
    }
    .btn3{
      width: 153px;
      height: 139px;
      position: absolute;
      top: 39px;
      left:336px;
    }
    .btn{
      img{
        width: 100%;
        height: 100%;
      }
    }
  }

</style>